<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/bootstrap-v4.6.0.css">
	<link rel="stylesheet" href="./css/login.css">
</head>

<body>
	<div class="login-box">
		<div class="form-group">
			<label for="username">Account</label>
			<!-- 账号 -->
			<input type="text" class="form-control" id="username" autocomplete="off">
			<small id="emailHelp" class="form-text text-muted">The available account is
				<strong>admin</strong>
			</small>
		</div>
		<div class="form-group">
			<!-- 密码 -->
			<label for="password">Password</label>
			<input type="password" class="form-control" id="password">
			<small id="emailHelp" class="form-text text-muted">The available password is
				<strong>123456</strong>
			</small>
		</div>
		<button type="submit" class="btn btn-primary" id="btnLogin">Submit</button>
	</div>
	<!-- 导入axios.js -->
	<script src="./lib/axios.js"></script>
	<script>
		// 获取元素
		const username = document.querySelector('#username');
		const password = document.querySelector('#password');
		const btnLogin = document.querySelector('#btnLogin');
		// 绑定事件
		btnLogin.addEventListener('click',function(){
			// 请求方法:post
			// 资源路径:http://www.liulongbin.top:3009/api/reg
			// 请求体参数有:{username,password}
			axios({
				method:'post',
				url:'http://www.liulongbin.top:3009/api/login', //login登录 reg注册
				// data传递请求参数,params传递查询参数.
				data:{
					username:username.value,
					password:password.value,
				}
			}).then(({data:res})=> {
				// 判断业务状态码
				if(res.code == 200){
                    alert(res.msg)
				}else{
                    alert(res.msg)
				}

			})
			
		})

		
	</script>
</body>

</html>